import React, { useState } from 'react';
import { Layout, message, theme } from 'antd';
import axios from 'axios';
import MyHeader from '../../components/MyHeader';
import MyFooter from '../../components/MyFooter';


const { Content } = Layout;

const DCCDIdentificationTool = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const [files, setFiles] = useState([]);

    const handleFileChange = (event) => {
        const selectedFiles = Array.from(event.target.files);

        if (selectedFiles.length !== 4) {
            message.error('请上传正好4个文件！');
            return;
        }

        setFiles(selectedFiles);
    };

    const handleUpload = async () => {
        if (files.length !== 4) {
            message.error('请确保上传4个文件！');
            return;
        }

        for (const file of files) {
            const formData = new FormData();
            formData.append('files', file);


            try {
                const response = await axios.post('http://localhost:8080/upload', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                if (file.name === 'patientmatrix.csv')
                    message.success(`文件上传成功!`);
                // message.success(file.name + `文件上传成功!`);
                console.log(response.data);
                // 只在 response.data 为 "IM2" 或 "IM4" 时弹出消息
                if (response.data === 'IM2' || response.data === 'IM4') {
                    message.success(`肾癌分型为: ${response.data}`);
                }
            } catch (error) {
                // message.error(`文件 ${file.name} 上传失败!`);
                // console.error('Error uploading file:', error);
            }

        }
    };

    return (
        <Layout>
            <MyHeader />
            <Content
                style={{
                    padding: '0 48px',
                }}
            >
                <div
                    style={{
                        padding: 24,
                        minHeight: 580,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                        position: 'relative',
                        display: 'flex',
                        alignItems: 'center',
                    }}
                >
                    <div
                        style={{
                            width: '2px',
                            height: '80%',
                            backgroundColor: '#38B474',
                            position: 'absolute',
                            left: '50%',
                            transform: 'translateX(-50%)',
                        }}
                    ></div>
                    <div
                        style={{
                            width: '40%',
                            height: '80%',
                            backgroundColor: '#e0e0db',
                            position: 'absolute',
                            left: 'calc(50% - 40% - 50px)',
                            top: '50%',
                            transform: 'translateY(-50%)',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                        }}
                    >
                        <input
                            type="file"
                            accept=".csv"
                            multiple
                            onChange={handleFileChange}
                            style={{ display: 'none' }}
                            id="file-input"
                        />
                        <button
                            onClick={() => document.getElementById('file-input').click()}
                            style={{ marginTop: '10px', marginBottom: '20px' }}
                        >
                            上传文件
                        </button>
                        <button onClick={handleUpload} style={{ marginBottom: '20px' }}>
                            提交并分析
                        </button>
                        <div style={{ textAlign: 'center' }}>
                            {files.length > 0 && (
                                <div>
                                    {files.map((file, index) => (
                                        <div key={index}>
                                            {file.name} - {(file.size / 1024).toFixed(2)} KB - {file.type}
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                    <div
                        style={{
                            width: '40%',
                            height: '50%',
                            backgroundColor: '#e0e0db',
                            position: 'absolute',
                            right: 'calc(50% - 40% - 50px)',
                            top: '10%',
                            display: 'flex',
                            justifyContent: 'flex-start',
                        }}
                    ></div>
                    <div
                        style={{
                            width: '40%',
                            height: '28%',
                            backgroundColor: '#e0e0db',
                            position: 'absolute',
                            right: 'calc(50% - 40% - 50px)',
                            top: 'calc(10% + 50% + 10px)',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                        }}
                    ></div>
                </div>
            </Content>
            <MyFooter />
        </Layout>
    );
}

export default DCCDIdentificationTool;
